<!DOCTYPE html>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>服务器监控</title>
<jsp:include page="/common/head.jsp"></jsp:include>
<link
	href="<%=request.getContextPath()%>/static/plugin/zTree/css/zTreeStyle/zTreeStyle.css"
	rel="stylesheet">
<script
	src="<%=request.getContextPath()%>/static/plugin/zTree/js/jquery.ztree.all-3.5.min.js"></script>

</head>
<body class="iframe-page">
    <div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>服务器信息</span>
        </div>
    </div>
    <div class="page-title-border"></div>
</div>

        <div class="grid-row distance-top">
            <div class="col-12" style="padding-left:0">
                <div class="summer-panel">
                    <h3 class="distance-left">操作系统信息</h3>
                    <form id="serverForm">
                    <table class="table-view auto-width noborder">
                        <col width="20%">
                        <col width="30%">
                        <col width="20%">
                        <col width="30%">
                        <tr>
                            <td class="td-title">主机名称</td>
                            <td name="hostName"></td>
                            <td class="td-title">主机IP</td>
                            <td name="hostIp"></td>
                        </tr>
                        <tr>
                            <td class="td-title">操作系统架构</td>
                            <td name="osArch"></td>
                            <td class="td-title">操作系统类型</td>
                            <td name="osType"></td>
                        </tr>
                        
                        <tr>
                            <td class="td-title">操作系统版本</td>
                            <td name="osVersion"></td>
                            <td class="td-title">操作系统描述</td>
                            <td name="osDes"></td>
                        </tr>
                        
                    </table>
              </form>
                 
             </div>
             </div>
             </div>
          <div class="grid-row distance-top">   
            <div class="col-6" style="padding-left:0">
             <div class="summer-panel">
                    <h3 class="distance-left">内存使用情况</h3>
                    <form id="memoryForm">
                    <table class="table-view auto-width noborder">
                        <col width="30%">
                        <col width="70%">
                        <tr>
                            <td class="td-title">内存总大小</td>
                            <td name="total"></td>
                        </tr>
                        <tr>
                            <td class="td-title">已使用</td>
                            <td name="used"></td>
                        </tr>
                        <tr>
                            <td class="td-title">空闲</td>
                            <td name="free"></td>
                        </tr>
                    </table>
            </form>
            </div>              
        </div>
        
        <div class="col-6" style="padding-left:15px">
             <div class="summer-panel">
                    <h3 class="distance-left">CPU使用情况</h3>
                    <form id="cpuForm">
                    <table class="table-view auto-width noborder">
                        <col width="30%">
                        <col width="70%">
                        <tr>
                            <td class="td-title">总使用率</td>
                            <td name="total"></td>
                        </tr>
                        <tr>
                            <td class="td-title">用户使用率</td>
                            <td name="userUsed"></td>
                        </tr>
                        <!-- <tr>
                            <td class="td-title">系统使用率</td>
                            <td name="sysUsed"></td>
                        </tr>
                        <tr>
                            <td class="td-title">优先进程占用率</td>
                            <td name="niceUsed"></td>
                        </tr> -->
                        <tr>
                            <td class="td-title">空闲</td>
                            <td name="free"></td>
                        </tr>
                    </table>
            </form>
            </div>              
        </div>
        
    </div>
	
	<div id="codeContainer" class="summer-panel distance-double">
		<h3 class="distance-left">文件系统信息</h3>
		<table id="fsList" class="summer-datagrid">
			<thead>
				<tr>
					<th>名称</th>
					<th>总量</th>
					<th>已用</th>
					<th>剩余</th>
				</tr>
			</thead>
		</table>
	</div>

	<script>    
     	var basePath = '<%=request.getContextPath()%>';
		$(function() {
			$.ajax({
				type : 'GET',
				url : basePath + '/monitor/serverInfo',
				dataType : 'json',
				success : function(data) {
					var result = data.server;
					$("#serverForm").form({}).form("loadDataView", {
						data : result
					});
				}
			});
			$.ajax({
				type : 'GET',
				url : basePath + '/monitor/memoryInfo',
				dataType : 'json',
				success : function(data) {
					var result = data.mem;
					$("#memoryForm").form({}).form("loadDataView", {
						data : result
					});
				}
			});
			$.ajax({
				type : 'GET',
				url : basePath + '/monitor/cpuInfo',
				dataType : 'json',
				success : function(data) {
					var result = data.cpu;
					$("#cpuForm").form({}).form("loadDataView", {
						data : result
					});
				}
			});
			//初始化dataTable
			initDataTable();
		});

		// 初始化列表
		function initDataTable() {
			
			$('#fsList').datagrid({
				ajax:{
				    url: basePath + '/monitor/diskInfo'	
				},
				columns: [
				          {
				        	  field: 'fsName'
				          },          
				          {
                              field: 'fsTotal'
                          },
                          {
                              field: 'fsUsed'
                          },
                          {
                              field: 'fsFree'
                          },
				          
				],
				pagination:false
			});
		}
	</script>
</body>
</html>
